<template>
	<u-navbar title="表白墙" :autoBack="true" titleStyle="color:#d1f5f8;margin-left:-70%;margin-top:-0.5%;font-size:30rpx;"
		leftIconSize="30rpx" leftIconColor="#d1f5f8" placeholder bgColor="#01a7f4" height="75rpx" />
	<view class="content">
		<!-- 提示该列表为空内容 -->
		<u-empty mode="list" v-show="confessionContent.length == 0" iconColor="#01a7f4" textColor="#01a7f4" />
		<ConfessionWallItem v-for="p in confessionContent" :key="p.id" :item="p" @deletedShow="deleteOutcome">
		</ConfessionWallItem>
	</view>
	<image class="send" src="/static/images/send.png" @click="send"></image>
	<up-back-top :scroll-top="scrollTop" top="200rpx"></up-back-top>
	<!-- 删除后的提示 -->
	<u-modal :show="deletedShow" :content="confessionStore.deletedStatus.msg" @confirm=" closeDeletedShow"></u-modal>
</template>

<script setup>
	import ConfessionWallItem
	from "@/component/ConfessionWallItem.vue"
	import {
		ref,
		reactive,
		computed,
	} from 'vue'
	import {
		onShow,
		onPageScroll
	} from "@dcloudio/uni-app";
	import {
		useConfessionStore
	} from "@/stores/confessionStore.js"

	const confessionStore = useConfessionStore()

	function send() {
		uni.navigateTo({
			url: "/pages/sendConfession/sendConfession"
		})
	}
	const scrollTop = ref(0);
	const confessionContent = computed(() => {
		return confessionStore.confessionList
	})
	let user = reactive({});
	async function getConfessionList(data) {
		await confessionStore.getConfessionList(data)
	}
	onShow(async () => {
		console.log("bbq页面打开了")

		user = reactive({
			...JSON.parse(uni.getStorageSync("user"))
		});

		await getConfessionList({
			schoolId: user.schoolId
		})
	})
	const deletedShow = ref(false)

	function closeDeletedShow() {
		deletedShow.value = false;
	}

	function deleteOutcome(value) {
		console.log(value)
		deletedShow.value = value
	}
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})
</script>

<style lang="scss">
	page {
		background-image: url('/static/images/biaobaibgc.jpg');
		background-size: 100vw 100vh;
		width: 100vw;
		height: 100vh;
		background-attachment: fixed;

		.content {
			display: flex;
			width: 98%;

			margin: 0 auto;


			flex-direction: column;
		}

		.send {
			width: 300rpx;
			height: 100rpx;
			position: fixed;
			margin: auto;
			bottom: 80rpx;
			right: 0;
			left: 0;
		}
	}
</style>